{% extends "vmServer/index_server.html" %}

{% block content %}
		<div class="col-xs-12">
			<h3 class="header smaller lighter blue">
			<i class="icon-hand-right icon-animated-hand-pointer blue"></i>
			{{ storage.pool_name }}存储池详情</h3>
			
						<div class="col-sm-4">							
							
										<div class="profile-user-info profile-user-info-striped">
												<div class="profile-info-row">
													<div class="profile-info-name"> 存储池名称 </div>

													<div class="profile-info-value">
														<span class="editable" >{{ storage.pool_name }}</span>
													</div>
												</div>

												<div class="profile-info-row">
													<div class="profile-info-name"> 类型 </div>

													<div class="profile-info-value">
														<i class="icon-map-marker light-orange bigger-110"></i>
														<span class="editable" >{{ storage.pool_type }}</span>
													</div>
												</div>

												<div class="profile-info-row">
													<div class="profile-info-name"> 状态</div>

													<div class="profile-info-value">
														<span class="editable" >{{ storage.pool_active }}</span>
													</div>
												</div>

												<div class="profile-info-row">
													<div class="profile-info-name"> 容量(GB) </div>

													<div class="profile-info-value">
														<span class="editable" >{{ storage.pool_size }}</span>
													</div>
												</div>

												<div class="profile-info-row">
													<div class="profile-info-name"> 剩余容量(GB)</div>

													<div class="profile-info-value">
														<span class="editable" >{{ storage.pool_available}}</span>
													</div>
												</div>

												<div class="profile-info-row">
													<div class="profile-info-name"> 使用率 </div>

													
													<div class="profile-info-value ">
														<span class="editable" >
															{% if storage.mem_per > 90  %}
																<div class="easy-pie-chart percentage" data-percent="{{ storage.pool_per }}" data-color="#D15B47">
																	<span class="percent">{{ storage.pool_per }}</span>%
																</div>	
															{% elif 70 < storage.pool_per and storage.pool_per < 90 %}	
																<div class="easy-pie-chart percentage" data-percent="{{ storage.pool_per }}" data-color="#87CEEB">
																	<span class="percent">{{ storage.pool_per }}</span>%
																</div>												
															{% else %}
																<div class="easy-pie-chart percentage" data-percent="{{ storage.pool_per }}" data-color="#87B87F">
																	<span class="percent">{{ storage.pool_per }}</span>%
																</div>							
															{% endif %}												
														</span>
													</div>
													
												</div>
												
												<div class="profile-info-row">
													<div class="profile-info-name"> 存储路径 </div>
													<div class="profile-info-value">
														<span class="editable" >{{ storage.pool_path }}</span>
													</div>
												</div>	
												
												<div class="profile-info-row">
													<div class="profile-info-name"> 卷个数 </div>

													<div class="profile-info-value">
														<span class="editable badge badge-success">
															{{ storage.pool_volumes }}
														</span>
													</div>
												</div>

												<div class="profile-info-row">
													<div class="profile-info-name"> 状态 </div>

													<div class="profile-info-value">
														<span class="editable">
										                   	{% if storage.pool_active == 1 %}
										                   		 <span class="label label-success arrowed">on</span>
										                   	{% else %}
										                   		 <span class="label label-danger arrowed-in">off</span>
										                   	{% endif %}														
														</span>
													</div>
												</div>
																																														
											</div>
									</div>
			<div class="col-sm-8">
			<div class="table-header"></div>		
			<div class="tabbable">
				<ul class="nav nav-tabs padding-12 tab-color-blue background-blue" id="myTab4">
					<li class="active">
						<a data-toggle="tab" href="#dropdown14">卷列表</a>
					</li>
<!-- 					<li> -->
<!-- 						<a data-toggle="tab" href="#profile4">添加卷</a> -->
<!-- 					</li> -->
				</ul>

				<div class="tab-content">

						<div id="profile4" class="tab-pane">
								
<!-- 										<p class="center"> -->
<!-- 											<button type="button" class="btn btn-success btn-lg">+添加卷</button> -->
<!-- 										</p>																 -->
								
									
								
						</div>

						<div id="dropdown14" class="tab-pane in active">
								<div class="widget-toolbox padding-8 clearfix">
		
									<button class="btn btn-xs btn-success pull-left" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#addVolumeModal">
										<i class="icon-arrow-right icon-plus"></i>
										<span class="bigger-110">添加卷</span>
									</button>
								</div>
													<div>
														<table class="table table-striped table-bordered">
															<thead>
																<tr>
																	<th class="center">序号</th>
																	<th class="center">卷名称</th>
																	<th class="center">类型</th>
																	<th class="center">容量(GB)</th>
																	<th class="center">使用容量(GB)</th>
																	<th class="center">使用率</th>
																	<th class="hidden-480 center">操作</th>
																</tr>
															</thead>
										
															<tbody>
																{% for ds in storage.pool_vols %}
																<tr>
																	<td class="center">{{ forloop.counter }}</td>
																	<td class="center">
																		<a>{{ ds.vol_name }}</a>
																	</td>
																	<td class=" center">
																			{{ ds.vol_type}}								
																	</td>
																	<td class="center">
																			{{ ds.vol_size }}								
																	</td>
																	<td class="center">
																			{{ ds.vol_available }}																		
																	</td>
																	<td class="center">
																			
																		<div class="progress  progress-striped" data-percent="{{ ds.vol_per }}%">
																			{% if ds.vol_per > 90  %}
																		<div class="progress-bar progress-bar-danger" style="width: {{ ds.vol_per }}%;"></div>
																			{% elif 70 < ds.vol_per and ds.vol_per < 90 %}
																		<div class="progress-bar progress-bar-yellow" style="width: {{ ds.vol_per }}%;"></div>
																			{% else %}
																		<div class="progress-bar progress-bar-success" style="width: {{ ds.vol_per }}%;"></div>
																		{% endif %}																			
																	</td>
																
																	<td class="center">
																		<button class="btn btn-primary btn-xs" onclick="onBtnHandleVolume(this,{{vmServer.id}},'{{storage.pool_name}}','{{ds.vol_name}}','clone')">
																			克隆
																		</button>
																		<button class="btn btn-danger btn-xs" onclick="onBtnHandleVolume(this,{{vmServer.id}},'{{storage.pool_name}}','{{ds.vol_name}}','delete')">
																			删除
																		</button>
																	</td>
																</tr>
																{% endfor %}
															</tbody>
														</table>
													</div>													
													<div class="hr "></div>
										
													<div class="row">
														<div class="col-sm-5 pull-right">
															<h4 class="pull-right">
																Total Volume:
																<span class="red">{{ storage.pool_vols|length }}</span>
															</h4>
														</div>
														<div class="col-sm-7 pull-left"> 汇总信息 </div>
													</div>							
																
						</div>
				</div>
			</div>
		</div>
		
		
		<div class="modal fade" id="addVolumeModal" tabindex="-1" role="dialog" aria-labelledby="addVolumeModalLabel" aria-hidden="true">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
							&times;
						</button>
						<h4 class="modal-title" id="addVolumeModalLabel">
							{{ storage.pool_name }}新增卷
						</h4>
					</div>
					<div class="modal-body">
						
						<form class="form-horizontal" id="addVolume">

																<div class="form-group">
																	<label class="control-label col-xs-12 col-sm-3 no-padding-right" for="email"><strong>卷类型:</strong></label>
						
																	<div class="col-xs-12 col-sm-9">
																		<div class="clearfix">
																			<select id="vNetwork-select" name="vol_drive">
																				<option value="">选择卷类型</option>
																				<option value="qcow2">qcow2</option>	
																				<option value="raw">raw</option>																		
																			</select>
																		</div>
																	</div>																							
																</div>																										
						
																<div class="form-group">
																	<label class="col-sm-3 control-label no-padding-right" for="form-field-4"><strong>卷名称:</strong></label>
							
																	<div class="col-sm-9">
																		<input class="input-sm" type="text" id="form-field-6" placeholder="vm1.img" name="vol_name" />																																					
																	</div>
																</div>																								

																<div class="form-group">
																	<label class="col-sm-3 control-label no-padding-right" for="form-field-4"><strong>容量(GB):</strong></label>
							
																	<div class="col-sm-9">
																		<input class="input-sm" type="text" id="form-field-6" placeholder="20" name="vol_size" />																																					
																	</div>
																</div>														
																
				
													
																															
															</form>	
						
						
						
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">关闭
						</button>
						<button type="button" class="btn btn-primary" onclick="addVolume(this,{{vmServer.id}},'{{ storage.pool_name }}','add')">
							添加
						</button>
					</div>
				</div><!-- /.modal-content -->
			</div><!-- /.modal -->
		</div>
		
			
	 </div>	

	<script type="text/javascript">
		jQuery(function($) {
		var oldie = /msie\s*(8|7|6)/.test(navigator.userAgent.toLowerCase());
		$('.easy-pie-chart.percentage').each(function(){
			$(this).easyPieChart({
				barColor: $(this).data('color'),
				trackColor: '#EEEEEE',
				scaleColor: false,
				lineCap: 'butt',
				lineWidth: 8,
				animate: oldie ? false : 1000,
				size:75
			}).css('color', $(this).data('color'));
		});
		
		});
		
		
		function addVolume(obj,server_id,pool_name,op) {
			var server_data = {}
			var required = ['vol_size','vol_name','vol_drive']
			var form = document.getElementById('addVolume');
			for (var i = 0; i < form.length; ++i) {
				var name = form[i].name;
				var value = form[i].value;	
				idx = $.inArray(name, required);						
				if (idx >= 0 && value.length == 0){
					window.wxc.xcConfirm("请注意必填项不能为空~", window.wxc.xcConfirm.typeEnum.error);
					return false;
				};	
				if ( idx >= 0 && value.length != 0 && name.length != 0 ){						
					server_data[name] = value;
				};					
			};
			server_data['server_id'] = server_id;
			server_data['pool_name'] = pool_name;
			server_data['op'] = op;
			$.ajax({
				dataType: "JSON",
				url:'/handleVolume/', //请求地址
				type:"POST",  //提交类似
				data:server_data,  //提交参数
				success:function(response){
					if (response["code"] == 200){
						window.wxc.xcConfirm(response["msg"], window.wxc.xcConfirm.typeEnum.success);
					}
					else {
						window.wxc.xcConfirm(response["msg"], window.wxc.xcConfirm.typeEnum.error);
					}
					
				},
		    	error:function(response){
		    		window.wxc.xcConfirm(response["msg"], window.wxc.xcConfirm.typeEnum.error);
		    	}
			})	
		}		
		

		   function onBtnHandleVolume(obj, server_id,pool_name,volume_name,op){
				var btnObj = $(obj);
				if ( op == 'delete'){
					var txt=  "是否确认删除("+ volume_name + ")？"
				}
				else if ( op == 'clone'){
					var txt=  "是否确认克隆("+ volume_name + ")？"
				};				
				var option = {
						title: "操作主机("+'{{vmServer.hostname}}'+")",
						btn: parseInt("0011",2),
						onOk: function(){
							$.ajax({
								  type: 'POST',
								  url: '/handleVolume/',
								  data:{
										"server_id":server_id,		
										"op":op,
										"pool_name":pool_name,
										"vol_name":volume_name,
									},
							      success:function(response){			            
						                if (response["code"]=="200"){ 
						                	window.wxc.xcConfirm(response["msg"], window.wxc.xcConfirm.typeEnum.success);

						                }
							        	else{
							        		window.wxc.xcConfirm(response["msg"], window.wxc.xcConfirm.typeEnum.error);
							        	}						                
								},
					            error:function(response){
					            	window.wxc.xcConfirm(response["msg"], window.wxc.xcConfirm.typeEnum.error);
					            },		
								});
						},
						onCancel:function(){	
						},
						onClose:function(){
						}
					}			
				window.wxc.xcConfirm(txt, "custom", option);
			}		
		
	</script>
{% endblock %}